<template>
  <div class="about">
    <h1>This is an about/{{msg}} page</h1>
  </div>
</template>
<script>
export default {
  beforeCreate () {
    console.log('组件钩子: beforeCreate')
  },
  created () {
    console.log('组件钩子: created')
  },
  beforeMount () {
    console.log('组件钩子: beforeMount')
  },
  mounted () {
    console.log('组件钩子: mounted')
  },
  beforeUpdate () {
    console.log('组件钩子: beforeUpdate')
  },
  updated () {
    console.log('组件钩子: updated')
  },
  beforeDestroy () {
    console.log('组件钩子: beforeDestroy')
  },
  destoryed () {
    console.log('组件钩子: destoryed')
  },
  // 组件内部路由钩子
  // beforeRouteUpdate 比较特殊，只有动态路由更新时才会进入，例如 '/about/1' 跳转至 '/about/2'
  // beforeRouteEnter 每个路由只会进一次，动态路由不会重复进入
  beforeRouteEnter (to, from, next) {
    console.log('组件内部守卫: beforeRouteEnter,')
    next()
  },
  beforeRouteUpdate (to, from, next) {
    console.log('组件内部守卫: beforeRouteUpdate,')
    // console.log(to, from)
    this.msg = to.params.id
    next()
  },
  beforeRouteLeave (to, from, next) {
    console.log('组件内部守卫: beforeRouteLeave,')
    next()
  },
  data () {
    return {
      msg: 1
    }
  }
}
</script>
